<template>
  <div class="me-view-body" v-title :data-title="title">
    <el-container class="me-view-container">
      <!--<el-aside class="me-area">-->
      <!--<ul class="me-operation-list">-->
      <!--<li class="me-operation-item">-->
      <!--<el-button type="primary" icon="el-icon-edit"></el-button>-->
      <!--</li>-->
      <!--</ul>-->
      <!--</el-aside>-->
      <el-main>

        <div class="me-view-card">
          <h1 class="me-view-title">{{ article.title }}</h1>
          <div class="me-view-author" style="position: relative">
            <a class="">
              <img class="me-view-picture" :src="article.author.avatar"/>
            </a>
            <div class="me-view-info">
              <span>{{ article.author.nickname }}</span>
              <div class="me-view-meta">
                <span>{{ article.createDate | format }}</span>
                <span>阅读   {{ article.viewCounts }}</span>
                <span>评论   {{ article.commentCounts }}</span>
              </div>
            </div>
            <div style="position: absolute;bottom: 0; right: 0;">
              <el-button
                :type="collectedParam.collected ? 'warning' : 'plain'"
                v-if="this.$store.state.id"
                size="mini"
                round
                @click="doUpdateCollected"
                icon="el-icon-star-off">收藏
              </el-button>
              <el-link :href="downloadUrl" target="_blank">
                <el-button
                  type="info"
                  size="mini"
                  round
                  icon="el-icon-download">下载
                </el-button>
              </el-link>
              <el-button
                v-if="this.article.author.id === this.$store.state.id"
                type="primary"
                @click="editArticle()"
                size="mini"
                round
                icon="el-icon-edit">编辑
              </el-button>
              <el-button
                v-if="this.article.author.id === this.$store.state.id"
                type="danger"
                @click="deleteArticle()"
                size="mini"
                round
                style="margin-left: 0"
                icon="el-icon-delete">删除
              </el-button>
            </div>
          </div>
          <div style="height: 10px"></div>
          <div class="me-view-content">
            <markdown-editor :editor=article.editor></markdown-editor>
          </div>

          <div class="me-view-end">
            <el-alert
              title="文章End..."
              type="success"
              center
              :closable="false">
            </el-alert>
          </div>

          <div class="me-view-tag">
            标签：
            <!--<el-tag v-for="t in article.tags" :key="t.id" class="me-view-tag-item" size="mini" type="success">{{t.tagName}}</el-tag>-->
            <el-button @click="tagOrCategory('tag', t.id)" size="mini" type="primary" v-for="t in article.tags"
                       :key="t.id" round plain>{{ t.tagName }}
            </el-button>
          </div>

          <div class="me-view-tag">
            文章分类：
            <!--<span style="font-weight: 600">{{article.category.categoryName}}</span>-->
            <el-button @click="tagOrCategory('category', article.category.id)" size="mini" type="primary" round plain>
              {{ article.category.categoryName }}
            </el-button>
          </div>

          <div class="me-view-comment">
            <div class="me-view-comment-write">
              <el-row :gutter="20">
                <el-col :span="2">
                  <a class="">
                    <img class="me-view-picture" :src="avatar"></img>
                  </a>
                </el-col>
                <el-col :span="22">
                  <el-input
                    type="textarea"
                    :autosize="{ minRows: 2}"
                    placeholder="你的评论..."
                    class="me-view-comment-text"
                    v-model="comment.content"
                    resize="none">
                  </el-input>
                </el-col>
              </el-row>

              <el-row :gutter="20">
                <el-col :span="2" :offset="22">
                  <el-button type="text" @click="publishComment()">评论</el-button>
                </el-col>
              </el-row>
            </div>

            <div class="me-view-comment-title">
              <span>{{ article.commentCounts }} 条评论</span>
            </div>

            <commment-item
              v-for="(c,index) in comments"
              :comment="c"
              :articleId="article.id"
              :index="index"
              :rootCommentCounts="comments.length"
              @commentCountsIncrement="commentCountsIncrement"
              :key="c.id">
            </commment-item>

          </div>

        </div>
      </el-main>

    </el-container>
  </div>
</template>

<script>
import MarkdownEditor from '@/components/markdown/MarkdownEditor'
import CommmentItem from '@/components/comment/CommentItem'
import {viewArticle, deleteArticleById} from '@/api/article'
import {getCommentsByArticle, publishComment} from '@/api/comment'
// import default_avatar from '@/assets/img/default_avatar.png'
import {isCollected, updateCollected} from "../../api/article";

export default {
  name: 'BlogView',
  created() {
    this.getArticle()
  },
  watch: {
    '$route': 'getArticle'
  },
  data() {
    return {
      article: {
        id: '',
        title: '',
        commentCounts: 0,
        viewCounts: 0,
        summary: '',
        author: {},
        authorAvatar: '',
        tags: [],
        category: {},
        createDate: '',
        editor: {
          value: '',
          toolbarsFlag: false,
          subfield: false,
          defaultOpen: 'preview'
        }
      },
      collectedParam: {
        articleId: '',
        collected: false,
      },
      comments: [],
      comment: {
        article: {},
        content: ''
      },
      default_avatar: 'http://bishe.img.liubai.ink/blog/default_avatar.png'
    }
  },
  computed: {
    avatar() {
      let avatar = this.$store.state.avatar
      if (avatar) {
        return avatar
      }
      return this.default_avatar
    },
    title() {
      return `${this.article.title} - 文章 - 博乐阁`
    },
    downloadUrl() {
      return `${process.env.BASE_API}/articles/download/${this.article.id}`
    }
  },
  methods: {
    tagOrCategory(type, id) {
      this.$router.push({path: `/${type}/${id}`})
    },
    editArticle() {
      this.$router.push({path: `/write/${this.article.id}`})
    },
    deleteArticle() {
      this.$prompt('是否确认删除(请输入"yes")', '警告', {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        inputPattern: /^yes$/,
        inputErrorMessage: '请输入"yes"'
      }).then(({value}) => {
        // 前往主页，并刷新主页页面重新获取数据
        this.$router.push({path: '/'}).then(() => this.$router.go(0))
        // 删除文章
        deleteArticleById(this.article.id, this.$store.state.token).then(resp => {
          if (resp.success) {
            this.$message({type: 'success', message: '删除成功', showClose: true})
          } else {
            this.$message({type: 'error', message: `删除失败，原因：${resp.message}`, showClose: true})
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消删除',
          showClose: true
        });
      });
    },
    getArticle() {
      let that = this
      viewArticle(that.$route.params.id).then(data => {
        if (data.success) {
          if (data.data === null) {
            that.$message({type: 'error', message: '文章已经被删除', showClose: true})
            return
          }
          Object.assign(that.article, data.data)
          that.article.editor.value = data.data.body.content
          this.collectedParam.articleId = that.article.id
          that.articleIsCollected()
          that.getCommentsByArticle()
        } else {
          that.$message({type: 'error', message: '文章加载失败', showClose: true})
        }
      }).catch(error => {
        if (error !== 'error') {
          that.$message({type: 'error', message: '文章加载失败', showClose: true})
        }
      })
    },
    publishComment() {
      let that = this
      if (!that.comment.content) {
        return;
      }
      that.comment.article.id = that.article.id
      let parms = {articleId: that.article.id, content: that.comment.content}
      publishComment(parms, this.$store.state.token).then(data => {
        if (data.success) {
          that.$message({type: 'success', message: '评论成功', showClose: true})
          that.comment.content = ''
          that.comments.unshift(data.data)
          that.commentCountsIncrement()
          // that.getCommentsByArticle();
        } else {
          that.$message({type: 'error', message: data.msg, showClose: true})
        }

      }).catch(error => {
        if (error !== 'error') {
          that.$message({type: 'error', message: '评论失败', showClose: true})
        }
      })
    },
    getCommentsByArticle() {
      let that = this
      getCommentsByArticle(that.article.id).then(data => {
        if (data.success) {
          that.comments = data.data
        } else {
          that.$message({type: 'error', message: '评论加载失败', showClose: true})
        }
      }).catch(error => {
        if (error !== 'error') {
          that.$message({type: 'error', message: '评论加载失败', showClose: true})
        }
      })
    },
    commentCountsIncrement() {
      this.article.commentCounts += 1
    },
    // 判断文章是否被收藏
    articleIsCollected() {
      isCollected(this.article.id, this.$store.state.token).then(resp => {
        this.collectedParam.collected = resp.success && resp.data
      })
    },
    // 修改文章收藏状态
    doUpdateCollected() {
      this.collectedParam.collected = !this.collectedParam.collected
      updateCollected(this.collectedParam, this.$store.state.token).then(resp => {
        if (resp.success) {
          if (this.collectedParam.collected) {
            this.$message({type: 'success', message: '文章收藏成功', showClose: true})
          } else {
            this.$message({type: 'success', message: '取消收藏成功', showClose: true})
          }
        } else {
          this.collectedParam.collected = !this.collectedParam.collected
        }
      }).catch(() => this.collectedParam.collected = !this.collectedParam.collected)
    }
  },
  components: {
    'markdown-editor': MarkdownEditor,
    CommmentItem
  },
  //组件内的守卫 调整body的背景色
  beforeRouteEnter(to, from, next) {
    window.document.body.style.backgroundColor = '#fff';
    next();
  },
  beforeRouteLeave(to, from, next) {
    window.document.body.style.backgroundColor = '#f5f5f5';
    next();
  }
}
</script>

<style>
.me-view-body {
  margin: 100px auto 140px;
}

.me-view-container {
  width: 800px;
}

.el-main {
  overflow: hidden;
}

.me-view-title {
  font-size: 34px;
  font-weight: 800;
  line-height: 1.3;
}

.me-view-author {
  /*margin: 30px 0;*/
  margin-top: 30px;
  vertical-align: middle;
}

.me-view-picture {
  width: 40px;
  height: 40px;
  border: 1px solid #ddd;
  border-radius: 50%;
  vertical-align: middle;
  background-color: #5fb878;
}

.me-view-info {
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
}

.me-view-meta {
  font-size: 12px;
  color: #969696;
}

.me-view-end {
  margin-top: 20px;
}

.me-view-tag {
  margin-top: 20px;
  padding-left: 6px;
  border-left: 4px solid #c5cac3;
}

.me-view-tag-item {
  margin: 0 4px;
}

.me-view-comment {
  margin-top: 60px;
}

.me-view-comment-title {
  font-weight: 600;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 20px;
}

.me-view-comment-write {
  margin-top: 20px;
}

.me-view-comment-text {
  font-size: 16px;
}

.v-show-content {
  padding: 8px 25px 15px 30px !important;
}

.v-note-wrapper .v-note-panel {
  box-shadow: none !important;
}

.v-note-wrapper .v-note-panel .v-note-show .v-show-content, .v-note-wrapper .v-note-panel .v-note-show .v-show-content-html {
  background: #fff !important;
}


</style>
